<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 4.2.0">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">


<link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="//cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.css">
  <link rel="stylesheet" href="/lib/pace/pace-theme-minimal.min.css">
  <script src="/lib/pace/pace.min.js"></script>

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"lanqilu.github.io","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12,"onmobile":true},"copycode":{"enable":true,"show_result":true,"style":null},"back2top":{"enable":true,"sidebar":true,"scrollpercent":true},"bookmark":{"enable":false,"color":"#395ca3","save":"auto"},"fancybox":true,"mediumzoom":false,"lazyload":false,"pangu":true,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
  </script>

  <meta name="description" content="HTML是名词，CSS是形容词，JavaScript是动词">
<meta property="og:type" content="article">
<meta property="og:title" content="HTML基本内容">
<meta property="og:url" content="https://lanqilu.github.io/2019/08/09/Web/HTML%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/index.html">
<meta property="og:site_name" content="Halo">
<meta property="og:description" content="HTML是名词，CSS是形容词，JavaScript是动词">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2019-08-09T05:32:50.000Z">
<meta property="article:modified_time" content="2020-03-30T09:50:23.875Z">
<meta property="article:author" content="Lanqilu">
<meta property="article:tag" content="HTML">
<meta name="twitter:card" content="summary">

<link rel="canonical" href="https://lanqilu.github.io/2019/08/09/Web/HTML%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>HTML基本内容 | Halo</title>
  
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-161500949-1"></script>
    <script data-pjax>
      if (CONFIG.hostname === location.hostname) {
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'UA-161500949-1');
      }
    </script>


  <script data-pjax>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?256151d1651e9d73ec980b2fc69de8f6";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>




  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">Halo</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>




<nav class="site-nav">
  <ul id="menu" class="menu">
        <li class="menu-item menu-item-home">

    <a href="/" rel="section"><i class="fa fa-fw fa-home"></i>首页</a>

  </li>
        <li class="menu-item menu-item-tags">

    <a href="/tags/" rel="section"><i class="fa fa-fw fa-tags"></i>标签<span class="badge">39</span></a>

  </li>
        <li class="menu-item menu-item-categories">

    <a href="/categories/" rel="section"><i class="fa fa-fw fa-th"></i>分类<span class="badge">18</span></a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/archives/" rel="section"><i class="fa fa-fw fa-archive"></i>归档<span class="badge">85</span></a>

  </li>
        <li class="menu-item menu-item-python">

    <a href="/categories/Python/" rel="section"><i class="fa fa-fw fa-code"></i>Python</a>

  </li>
        <li class="menu-item menu-item-java">

    <a href="/categories/Java/" rel="section"><i class="fa fa-fw fa-code"></i>Java</a>

  </li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div id="search-result">
  <div id="no-result">
    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
  </div>
</div>

    </div>
  </div>

</div>
    </header>

    
  <div class="reading-progress-bar"></div>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content post posts-expand">
            

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://lanqilu.github.io/2019/08/09/Web/HTML%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="http://img.whl123456.top/image/avatar.jpg">
      <meta itemprop="name" content="Lanqilu">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Halo">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          HTML基本内容
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2019-08-09 13:32:50" itemprop="dateCreated datePublished" datetime="2019-08-09T13:32:50+08:00">2019-08-09</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="fa fa-calendar-check-o"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2020-03-30 17:50:23" itemprop="dateModified" datetime="2020-03-30T17:50:23+08:00">2020-03-30</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/Web/" itemprop="url" rel="index"><span itemprop="name">Web</span></a>
                </span>
            </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <div class="note info no-icon">
            <p>HTML是名词，CSS是形容词，JavaScript是动词</p>
          </div>
<a id="more"></a>

<h2 id="HTML-简介"><a href="#HTML-简介" class="headerlink" title="HTML 简介"></a>HTML 简介</h2><p>HTML 是用来描述网页的一种语言。</p>
<ul>
<li>HTML 指的是超文本标记语言 (<strong>H</strong>yper <strong>T</strong>ext <strong>M</strong>arkup <strong>L</strong>anguage)</li>
<li>HTML 不是一种编程语言，而是一种<strong>标记语言</strong> (markup language)</li>
<li>标记语言是一套<strong>标记标签</strong> (markup tag)</li>
<li>HTML 使用<strong>标记标签</strong>来描述网页</li>
</ul>
<h4 id="HTML-标签"><a href="#HTML-标签" class="headerlink" title="HTML 标签"></a>HTML 标签</h4><ul>
<li>HTML 标签是由<strong>尖括号</strong>包围的关键词，比如 <code>&lt;html&gt;</code></li>
<li>HTML 标签通常是<strong>成对出现</strong>的，比如<code>&lt;b&gt;</code>和 <code>&lt;/b&gt;</code></li>
<li>标签对中的第一个标签是<strong>开始标签</strong>，第二个标签是<strong>结束标签</strong></li>
<li>开始和结束标签也被称为<strong>开放标签</strong>和<strong>闭合标签</strong></li>
</ul>
<h4 id="HTML-文档-网页"><a href="#HTML-文档-网页" class="headerlink" title="HTML 文档 = 网页"></a>HTML 文档 = 网页</h4><ul>
<li>HTML 文档<strong>描述网页</strong></li>
<li>HTML 文档<strong>包含 HTML 标签</strong>和纯文本</li>
<li>HTML 文档也被称为<strong>网页</strong></li>
</ul>
<h2 id="HTML基础"><a href="#HTML基础" class="headerlink" title="HTML基础"></a>HTML基础</h2><h4 id="HTML-标题"><a href="#HTML-标题" class="headerlink" title="HTML 标题"></a>HTML 标题</h4><p>HTML 标题（Heading）是通过<code>&lt;h1&gt;</code> - <code>&lt;h6&gt;</code> 等标签进行定义的。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>This is a heading<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>This is a heading<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">h3</span>&gt;</span>This is a heading<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="HTML-段落"><a href="#HTML-段落" class="headerlink" title="HTML 段落"></a>HTML 段落</h4><p>HTML 段落是通过 <code>&lt;p&gt;</code> 标签进行定义的。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>This is a paragraph.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>This is another paragraph.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="HTML-链接"><a href="#HTML-链接" class="headerlink" title="HTML 链接"></a>HTML 链接</h4><p>HTML 链接是通过 <code>&lt;a&gt;</code>标签进行定义的。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"http://www.w3school.com.cn"</span>&gt;</span>This is a link<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="HTML-图像"><a href="#HTML-图像" class="headerlink" title="HTML 图像"></a>HTML 图像</h4><p>HTML 图像是通过 <code>&lt;img&gt;</code> 标签进行定义的。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"xxxx.jpg"</span> <span class="attr">width</span>=<span class="string">"104"</span> <span class="attr">height</span>=<span class="string">"142"</span> /&gt;</span></span><br></pre></td></tr></table></figure>



<h2 id="HTML-元素"><a href="#HTML-元素" class="headerlink" title="HTML 元素"></a>HTML 元素</h2><p><strong>HTML 文档是由 HTML 元素定义的。</strong></p>
<p>HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。</p>
<blockquote>
<p>开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag）。</p>
</blockquote>
<p><strong>HTML 元素语法</strong></p>
<ul>
<li>HTML 元素以<strong>开始标签</strong>起始</li>
<li>HTML 元素以<strong>结束标签</strong>终止</li>
<li>元素的内容是开始标签与结束标签之间的内容</li>
<li>某些 HTML 元素具有<strong>空内容</strong>（empty content）</li>
<li>空元素<strong>在开始标签中进行关闭</strong>（以开始标签的结束而结束）</li>
<li>大多数 HTML 元素可拥有<strong>属性</strong></li>
<li>大多数 HTML 元素可以<strong>嵌套</strong>（可以包含其他 HTML 元素）。</li>
</ul>
<p><strong><code>&lt;p&gt;</code> 元素：</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>This is my first paragraph.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>这个 <code>&lt;p&gt;</code> 元素定义了 HTML 文档中的一个段落。</p>
<p>这个元素拥有一个开始标签 <code>&lt;p&gt;</code>，以及一个结束标签 <code>&lt;/p&gt;</code>。</p>
<p>元素内容是：This is my first paragraph。</p>
<p><strong><code>&lt;body&gt;</code> 元素：</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>This is my first paragraph.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><code>&lt;body&gt;</code> 元素定义了 HTML 文档的主体。</p>
<p>这个元素拥有一个开始标签 <code>&lt;body&gt;</code>，以及一个结束标签 <code>&lt;/body&gt;</code>。</p>
<p>元素内容是另一个 HTML 元素（<code>&lt;p&gt;</code>元素）。</p>
<p><strong><code>&lt;html&gt;</code> 元素：</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>This is my first paragraph.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><code>&lt;html&gt;</code> 元素定义了整个 HTML 文档。</p>
<p>这个元素拥有一个开始标签 <code>&lt;html&gt;</code>，以及一个结束标签 <code>&lt;/html&gt;</code>。</p>
<p>元素内容是另一个 HTML 元素（body 元素）。</p>
<p><strong>空的 HTML 元素</strong></p>
<p>没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。</p>
<p><code>&lt;br&gt;</code> 就是没有关闭标签的空元素（<code>&lt;br&gt;</code> 标签定义换行）。在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。</p>
<p>在开始标签中添加斜杠，比如 <code>&lt;br /&gt;</code>，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。</p>
<p>即使 <code>&lt;br&gt;</code> 在所有浏览器中都是有效的，但使用 <code>&lt;br /&gt;</code> 其实是更长远的保障。</p>
<h2 id="HTML-属性"><a href="#HTML-属性" class="headerlink" title="HTML 属性"></a>HTML 属性</h2><ul>
<li>HTML 标签可以拥有<strong>属性</strong>。属性提供了有关 HTML 元素的<strong>更多的信息</strong>。</li>
<li>属性总是以名称/值对的形式出现，比如：<strong>name=”value”</strong>。</li>
<li>属性总是在 HTML 元素的<strong>开始标签</strong>中规定。</li>
<li>属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。（在某些个别的情况下，比如属性值本身就含有双引号，那么必须使用单引号）</li>
</ul>
<p><a href="https://www.w3school.com.cn/tags/html_ref_standardattributes.asp" target="_blank" rel="noopener">HTML 标准属性参考手册</a></p>
<p><a href="https://www.w3school.com.cn/tags/html_ref_byfunc.asp" target="_blank" rel="noopener">完整的 HTML 参考手册</a></p>
<h2 id="HTML标题"><a href="#HTML标题" class="headerlink" title="HTML标题"></a>HTML标题</h2><p>标题（Heading）是通过 <code>&lt;h1&gt;</code> - <code>&lt;h6&gt;</code>等标签进行定义的。</p>
<p><code>&lt;h1&gt;</code> 定义最大的标题。<code>&lt;h6&gt;</code> 定义最小的标题。</p>
<blockquote>
<p>浏览器会自动地在标题的前后添加空行。</p>
<p>默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。</p>
</blockquote>
<p><strong>标题很重要</strong></p>
<p>请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。</p>
<p>搜索引擎使用标题为您的网页的结构和内容编制索引。</p>
<p>因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。</p>
<p>应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。</p>
<h3 id="HTML-水平线"><a href="#HTML-水平线" class="headerlink" title="HTML 水平线"></a>HTML 水平线</h3><p><code>&lt;hr/&gt;</code>标签在 HTML 页面中创建水平线。可用于分隔内容。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>This is a paragraph<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">hr</span>/&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>This is a paragraph<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">hr</span>/&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>This is a paragraph<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p>使用水平线 (<code>&lt;hr&gt;</code> 标签) 来分隔文章中的小节是一个办法（但并不是唯一的办法）。</p>
</blockquote>
<h3 id="HTML-注释"><a href="#HTML-注释" class="headerlink" title="HTML 注释"></a>HTML 注释</h3><p>可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。</p>
<p><strong>注释标签</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- This is a comment --&gt;</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p>开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要。</p>
<p>合理地使用注释可以对未来的代码编辑工作产生帮助</p>
</blockquote>
<p><strong>条件注释</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!--[if IE 8]&gt;</span></span><br><span class="line"><span class="comment">    .... some HTML here ....</span></span><br><span class="line"><span class="comment">&lt;![endif]--&gt;</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>条件注释定义只有 Internet Explorer 执行的 HTML 标签。</p>
</blockquote>
<h2 id="HTML-段落-1"><a href="#HTML-段落-1" class="headerlink" title="HTML 段落"></a>HTML 段落</h2><p>段落是通过 <code>&lt;p&gt;</code> 标签定义的。</p>
<blockquote>
<p>浏览器会自动地在段落的前后添加空行。（<code>&lt;p&gt;</code> 是块级元素）</p>
<p>使用空的段落标记<code>&lt;p&gt;``&lt;/p&gt;</code>去插入一个空行是个坏习惯。用 <code>&lt;br/&gt;</code> 标签代替它！</p>
<p>不要用 <code>&lt;br/&gt;</code> 标签去创建列表</p>
</blockquote>
<h3 id="HTML-折行"><a href="#HTML-折行" class="headerlink" title="HTML 折行"></a>HTML 折行</h3><p>不产生一个新段落的情况下进行换行（新行），请使用 <code>&lt;br/&gt;</code> 标签</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>This is<span class="tag">&lt;<span class="name">br</span> /&gt;</span>a para<span class="tag">&lt;<span class="name">br</span> /&gt;</span>graph with line breaks<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p><code>&lt;br/&gt;</code> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。</p>
<p>无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果</p>
<p>所有连续的空格或空行都会被算作一个空格</p>
</blockquote>
<h2 id="HTML-样式"><a href="#HTML-样式" class="headerlink" title="HTML 样式"></a>HTML 样式</h2><p><code>style</code> 属性用于改变 HTML 元素的样式。</p>
<h2 id="不赞成使用的标签和属性"><a href="#不赞成使用的标签和属性" class="headerlink" title="不赞成使用的标签和属性"></a>不赞成使用的标签和属性</h2><p>在 HTML 4 中，有若干的标签和属性是被废弃的。被废弃（Deprecated）的意思是在未来版本的 HTML 和 XHTML 中将不支持这些标签和属性。</p>
<p>这里传达的信息很明确：请避免使用这些被废弃的标签和属性！</p>
<h3 id="应该避免使用下面这些标签和属性："><a href="#应该避免使用下面这些标签和属性：" class="headerlink" title="应该避免使用下面这些标签和属性："></a>应该避免使用下面这些标签和属性：</h3><table>
<thead>
<tr>
<th align="left">标签</th>
<th align="left">描述</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><code>&lt;center&gt;</code></td>
<td align="left">定义居中的内容。</td>
</tr>
<tr>
<td align="left"><code>&lt;font&gt;</code> 和<code>&lt;basefont&gt;</code></td>
<td align="left">定义 HTML 字体。</td>
</tr>
<tr>
<td align="left"><code>&lt;s&gt;</code> 和 <code>&lt;strike&gt;</code></td>
<td align="left">定义删除线文本</td>
</tr>
<tr>
<td align="left"><code>&lt;u&gt;</code></td>
<td align="left">定义下划线文本</td>
</tr>
<tr>
<td align="left"><strong>属性</strong></td>
<td align="left"><strong>描述</strong></td>
</tr>
<tr>
<td align="left">align</td>
<td align="left">定义文本的对齐方式</td>
</tr>
<tr>
<td align="left">bgcolor</td>
<td align="left">定义背景颜色</td>
</tr>
<tr>
<td align="left">color</td>
<td align="left">定义文本颜色</td>
</tr>
</tbody></table>
<p>对于以上这些标签和属性：请使用样式代替！</p>
<h3 id="背景颜色"><a href="#背景颜色" class="headerlink" title="背景颜色"></a>背景颜色</h3><p><code>background-color</code> 属性为元素定义了背景颜色</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span> <span class="attr">style</span>=<span class="string">"background-color:black"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">h2</span> <span class="attr">style</span>=<span class="string">"background-color:red"</span>&gt;</span>This is a heading<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">style</span>=<span class="string">"background-color:green"</span>&gt;</span>This is a paragraph.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="字体、颜色和尺寸"><a href="#字体、颜色和尺寸" class="headerlink" title="字体、颜色和尺寸"></a>字体、颜色和尺寸</h3><p><code>font-family</code>、<code>color</code> 以及<code>font-size</code> 属性分别定义元素中文本的字体系列、颜色和字体尺寸</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">h1</span> <span class="attr">style</span>=<span class="string">"font-family:verdana"</span>&gt;</span>A heading<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">style</span>=<span class="string">"font-family:arial;color:red;font-size:20px;"</span>&gt;</span>A paragraph.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="文本对齐"><a href="#文本对齐" class="headerlink" title="文本对齐"></a>文本对齐</h3><p><code>text-align</code>属性规定了元素中文本的水平对齐方式</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">h1</span> <span class="attr">style</span>=<span class="string">"text-align:center"</span>&gt;</span>This is a heading<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>The heading above is aligned to the center of this page.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="HTML文本格式化"><a href="#HTML文本格式化" class="headerlink" title="HTML文本格式化"></a>HTML文本格式化</h2><h3 id="文本格式化标签"><a href="#文本格式化标签" class="headerlink" title="文本格式化标签"></a>文本格式化标签</h3><table>
<thead>
<tr>
<th align="left">标签</th>
<th align="left">描述</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><code>&lt;b&gt;</code></td>
<td align="left">定义粗体文本。</td>
</tr>
<tr>
<td align="left"><code>&lt;big&gt;</code></td>
<td align="left">定义大号字。</td>
</tr>
<tr>
<td align="left"><code>&lt;em&gt;</code></td>
<td align="left">定义着重文字。</td>
</tr>
<tr>
<td align="left"><code>&lt;i&gt;</code></td>
<td align="left">定义斜体字。</td>
</tr>
<tr>
<td align="left"><code>&lt;small&gt;</code></td>
<td align="left">定义小号字。</td>
</tr>
<tr>
<td align="left"><code>&lt;strong&gt;</code></td>
<td align="left">定义加重语气。</td>
</tr>
<tr>
<td align="left"><code>&lt;sub&gt;</code></td>
<td align="left">定义下标字。</td>
</tr>
<tr>
<td align="left"><code>&lt;sup&gt;</code></td>
<td align="left">定义上标字。</td>
</tr>
<tr>
<td align="left"><code>&lt;ins&gt;</code></td>
<td align="left">定义插入字。</td>
</tr>
<tr>
<td align="left"><code>&lt;del&gt;</code></td>
<td align="left">定义删除字。</td>
</tr>
</tbody></table>
<h3 id="“计算机输出”标签"><a href="#“计算机输出”标签" class="headerlink" title="“计算机输出”标签"></a>“计算机输出”标签</h3><table>
<thead>
<tr>
<th align="left">标签</th>
<th align="left">描述</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><code>&lt;code&gt;</code></td>
<td align="left">定义计算机代码。</td>
</tr>
<tr>
<td align="left"><code>&lt;kdd&gt;</code></td>
<td align="left">定义键盘码。</td>
</tr>
<tr>
<td align="left"><code>&lt;samp&gt;</code></td>
<td align="left">定义计算机代码样本</td>
</tr>
<tr>
<td align="left"><code>&lt;tt&gt;</code></td>
<td align="left">定义打字机代码。</td>
</tr>
<tr>
<td align="left"><code>&lt;var&gt;</code></td>
<td align="left">定义变量。</td>
</tr>
<tr>
<td align="left"><code>&lt;pre&gt;</code></td>
<td align="left">定义预格式文本。</td>
</tr>
</tbody></table>
<h3 id="引用、引用和术语定义"><a href="#引用、引用和术语定义" class="headerlink" title="引用、引用和术语定义"></a>引用、引用和术语定义</h3><table>
<thead>
<tr>
<th align="left">标签</th>
<th align="left">描述</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><code>&lt;abbr&gt;</code></td>
<td align="left">定义缩写。</td>
</tr>
<tr>
<td align="left"><code>&lt;acronym&gt;</code></td>
<td align="left">定义首字母缩写。</td>
</tr>
<tr>
<td align="left"><code>&lt;address&gt;</code></td>
<td align="left">定义地址。</td>
</tr>
<tr>
<td align="left"><code>&lt;bdo&gt;</code></td>
<td align="left">定义文字方向。</td>
</tr>
<tr>
<td align="left"><code>&lt;blockquote&gt;</code></td>
<td align="left">定义长的引用。</td>
</tr>
<tr>
<td align="left"><code>&lt;q&gt;</code></td>
<td align="left">定义短的引用语</td>
</tr>
<tr>
<td align="left"><code>&lt;cite&gt;</code></td>
<td align="left">定义引用、引证。</td>
</tr>
<tr>
<td align="left"><code>&lt;dfn&gt;</code></td>
<td align="left">定义一个定义项目。</td>
</tr>
</tbody></table>
<h2 id="HTML-引用"><a href="#HTML-引用" class="headerlink" title="HTML 引用"></a><a href="https://www.w3school.com.cn/html/html_quotation_elements.asp" target="_blank" rel="noopener">HTML 引用</a></h2><h2 id="HTML-计算机代码"><a href="#HTML-计算机代码" class="headerlink" title="HTML 计算机代码"></a><a href="https://www.w3school.com.cn/html/html_computercode_elements.asp" target="_blank" rel="noopener">HTML 计算机代码</a></h2><h2 id="HTML-CSS"><a href="#HTML-CSS" class="headerlink" title="HTML CSS"></a>HTML CSS</h2><h3 id="外部样式表"><a href="#外部样式表" class="headerlink" title="外部样式表"></a>外部样式表</h3><p>当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观</p>
<h3 id="内部样式表"><a href="#内部样式表" class="headerlink" title="内部样式表"></a>内部样式表</h3><p>当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <code>&lt;style&gt;</code> 标签定义内部样式表。</p>
<h3 id="内联样式"><a href="#内联样式" class="headerlink" title="内联样式"></a>内联样式</h3><p>当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。</p>
<h2 id="HTML-链接-1"><a href="#HTML-链接-1" class="headerlink" title="HTML 链接"></a>HTML 链接</h2><h3 id="超链接"><a href="#超链接" class="headerlink" title="超链接"></a>超链接</h3><p>超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。</p>
<p>当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。</p>
<p>我们通过使用 <code>&lt;a&gt;</code>标签在 HTML 中创建链接。</p>
<p>有两种使用 <code>&lt;a&gt;</code>标签的方式：</p>
<ul>
<li>通过使用 <code>href</code>属性 - 创建指向另一个文档的链接</li>
<li>通过使用 <code>name</code> 属性 - 创建文档内的书签</li>
</ul>
<h3 id="链接语法"><a href="#链接语法" class="headerlink" title="链接语法"></a>链接语法</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"http://www.w3school.com.cn/"</span>&gt;</span>Visit W3School<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="target-属性"><a href="#target-属性" class="headerlink" title="target 属性"></a>target 属性</h3><p>使用 Target 属性，你可以定义被链接的文档在何处显示。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"http://www.w3school.com.cn/"</span> <span class="attr">target</span>=<span class="string">"_blank"</span>&gt;</span>Visit W3School!<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!--如果把链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开。 --&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="name-属性"><a href="#name-属性" class="headerlink" title="name 属性"></a>name 属性</h3><p>name 属性规定锚（anchor）的名称</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">name</span>=<span class="string">"label"</span>&gt;</span>锚（显示在页面上的文本）<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><a href="http://www.w3school.com.cn/html/html_links.asp#tips" target="_blank" rel="noopener">实例-锚</a></p>
<blockquote>
<p>假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。</p>
</blockquote>
<h2 id="HTML-图像-1"><a href="#HTML-图像-1" class="headerlink" title="HTML 图像"></a><a href="https://www.w3school.com.cn/html/html_images.asp" target="_blank" rel="noopener">HTML 图像</a></h2><h3 id="图像标签（-lt-img-gt-）和源属性（Src）"><a href="#图像标签（-lt-img-gt-）和源属性（Src）" class="headerlink" title="图像标签（&lt;img&gt;）和源属性（Src）"></a>图像标签（<code>&lt;img&gt;</code>）和源属性（<code>Src</code>）</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"url"</span> /&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="替换文本属性（Alt）"><a href="#替换文本属性（Alt）" class="headerlink" title="替换文本属性（Alt）"></a>替换文本属性（<code>Alt</code>）</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"boat.gif"</span> <span class="attr">alt</span>=<span class="string">"Big Boat"</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息</p>
<h2 id="HTML-表格"><a href="#HTML-表格" class="headerlink" title="HTML 表格"></a><a href="https://www.w3school.com.cn/html/html_tables.asp" target="_blank" rel="noopener">HTML 表格</a></h2><hr>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">A[Hard edge] --&gt;|Link text| B(Round edge)</span><br><span class="line">    B --&gt; C&#123;Decision&#125;</span><br><span class="line">    C --&gt;|One| D[Result one]</span><br><span class="line">    C --&gt;|Two| E[Result two]</span><br></pre></td></tr></table></figure>

<pre><code>&lt;table&gt;
    &lt;tr&gt;
        &lt;th rowspan=&quot;2&quot;&gt;值班人员&lt;/th&gt;
        &lt;th&gt;星期一&lt;/th&gt;
        &lt;th&gt;星期二&lt;/th&gt;
        &lt;th&gt;星期三&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;李强&lt;/td&gt;
        &lt;td&gt;张明&lt;/td&gt;
        &lt;td&gt;王平&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;</code></pre><table>
    <tr>
        <th rowspan="2">值班人员</th>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
    </tr>
    <tr>
        <td>李强</td>
        <td>张明</td>
        <td>王平</td>
    </tr>
</table>

<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;table&gt;</span><br><span class="line">    &lt;tr&gt;</span><br><span class="line">        &lt;th rowspan&#x3D;&quot;2&quot;&gt;值班人员&lt;&#x2F;th&gt;</span><br><span class="line">        &lt;th&gt;星期一&lt;&#x2F;th&gt;</span><br><span class="line">        &lt;th&gt;星期二&lt;&#x2F;th&gt;</span><br><span class="line">        &lt;th&gt;星期三&lt;&#x2F;th&gt;</span><br><span class="line">    &lt;&#x2F;tr&gt;</span><br><span class="line">    &lt;tr&gt;</span><br><span class="line">        &lt;td&gt;李强&lt;&#x2F;td&gt;</span><br><span class="line">        &lt;td&gt;张明&lt;&#x2F;td&gt;</span><br><span class="line">        &lt;td&gt;王平&lt;&#x2F;td&gt;</span><br><span class="line">    &lt;&#x2F;tr&gt;</span><br><span class="line">&lt;&#x2F;table&gt;</span><br></pre></td></tr></table></figure>

<hr>
<p>二个注脚<a href="123">^footnote2</a>的样例。</p>
<h2 id="HTML-列表"><a href="#HTML-列表" class="headerlink" title="HTML 列表"></a><a href="https://www.w3school.com.cn/html/html_lists.asp" target="_blank" rel="noopener">HTML 列表</a></h2><h2 id="HTML块"><a href="#HTML块" class="headerlink" title="HTML块"></a><a href="https://www.w3school.com.cn/html/html_blocks.asp" target="_blank" rel="noopener">HTML块</a></h2><h3 id="HTML-块元素"><a href="#HTML-块元素" class="headerlink" title="HTML 块元素"></a>HTML 块元素</h3><p>块级元素在浏览器显示时，通常会以新行来开始（和结束）。</p>
<h3 id="HTML-lt-div-gt-元素"><a href="#HTML-lt-div-gt-元素" class="headerlink" title="HTML&lt;div&gt;元素"></a>HTML<code>&lt;div&gt;</code>元素</h3><p>HTML <code>&lt;div&gt;</code>元素是块级元素，它是可用于组合其他 HTML 元素的容器。</p>
<p><code>&lt;div&gt;</code>元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。</p>
<p>如果与 CSS 一同使用，<code>&lt;div&gt;</code> 元素可用于对大的内容块设置样式属性。</p>
<p><code>&lt;div&gt;</code> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <code>&lt;table&gt;</code> 元素进行文档布局不是表格的正确用法。<code>&lt;table&gt;</code> 元素的作用是显示表格化的数据。</p>
<h3 id="HTML-内联元素"><a href="#HTML-内联元素" class="headerlink" title="HTML 内联元素"></a>HTML 内联元素</h3><p>内联元素在显示时通常不会以新行开始。</p>
<p>HTML <code>&lt;span&gt;</code> 元素是内联元素，可用作文本的容器。</p>
<p><code>&lt;span&gt;</code> 元素也没有特定的含义。</p>
<p>当与 CSS 一同使用时，<code>&lt;span&gt;</code>元素可用于为部分文本设置样式属性。</p>
<h2 id="HTML类"><a href="#HTML类" class="headerlink" title="HTML类"></a><a href="https://www.w3school.com.cn/html/html_classes.asp" target="_blank" rel="noopener">HTML类</a></h2><p>对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。</p>
<p>为相同的类设置相同的样式，或者为不同的类设置不同的样式。</p>
<h3 id="分类块级元素"><a href="#分类块级元素" class="headerlink" title="分类块级元素"></a>分类块级元素</h3><p>HTML <code>&lt;div&gt;</code> 元素是<em>块级元素</em>。它能够用作其他 HTML 元素的容器。</p>
<p>设置 <code>&lt;div&gt;</code> 元素的类，使我们能够为相同的<code>&lt;div&gt;</code>元素设置相同的类：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="css"><span class="selector-class">.cities</span> &#123;</span></span><br><span class="line"><span class="css">    <span class="selector-tag">background-color</span><span class="selector-pseudo">:black</span>;</span></span><br><span class="line"><span class="css">    <span class="selector-tag">color</span><span class="selector-pseudo">:white</span>;</span></span><br><span class="line"><span class="css">    <span class="selector-tag">margin</span><span class="selector-pseudo">:20px</span>;</span></span><br><span class="line"><span class="css">    <span class="selector-tag">padding</span><span class="selector-pseudo">:20px</span>;</span></span><br><span class="line">&#125; </span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"cities"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>London<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>London is the capital city of England. </span><br><span class="line">It is the most populous city in the United Kingdom, </span><br><span class="line">with a metropolitan area of over 13 million inhabitants.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"cities"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>Paris<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>Paris is the capital and most populous city of France.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"cities"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>Tokyo<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,</span><br><span class="line">and the most populous metropolitan area in the world.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="分类行内元素"><a href="#分类行内元素" class="headerlink" title="分类行内元素"></a>分类行内元素</h3><p>HTML <code>&lt;span&gt;</code> 元素是行内元素，能够用作文本的容器。</p>
<p>设置<code>&lt;span&gt;</code> 元素的类，能够为相同的<code>&lt;span&gt;</code>元素设置相同的样式。</p>
<h2 id="HTML-布局"><a href="#HTML-布局" class="headerlink" title="HTML 布局"></a><a href="https://www.w3school.com.cn/html/html_layout.asp" target="_blank" rel="noopener">HTML 布局</a></h2><h3 id="使用-lt-div-gt-元素的-HTML-布局"><a href="#使用-lt-div-gt-元素的-HTML-布局" class="headerlink" title="使用 &lt;div&gt;元素的 HTML 布局"></a>使用 <code>&lt;div&gt;</code>元素的 HTML 布局</h3><h3 id="使用-HTML5-的网站布局"><a href="#使用-HTML5-的网站布局" class="headerlink" title="使用 HTML5 的网站布局"></a>使用 HTML5 的网站布局</h3><table>
<thead>
<tr>
<th>HTML5</th>
<th>语义元素</th>
</tr>
</thead>
<tbody><tr>
<td>header</td>
<td>定义文档或节的页眉</td>
</tr>
<tr>
<td>nav</td>
<td>定义导航链接的容器</td>
</tr>
<tr>
<td>section</td>
<td>定义文档中的节</td>
</tr>
<tr>
<td>article</td>
<td>定义独立的自包含文章</td>
</tr>
<tr>
<td>aside</td>
<td>定义内容之外的内容（比如侧栏）</td>
</tr>
<tr>
<td>footer</td>
<td>定义文档或节的页脚</td>
</tr>
<tr>
<td>details</td>
<td>定义额外的细节</td>
</tr>
<tr>
<td>summary</td>
<td>定义 details 元素的标题</td>
</tr>
</tbody></table>

    </div>

    
    
    
      


      <footer class="post-footer">
          
          <div class="post-tags">
              <a href="/tags/HTML/" rel="tag"><i class="fa fa-tag"></i> HTML</a>
          </div>

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/2019/08/09/Web/JavaScript_ECMAScript/" rel="prev" title="JavaScript ECMAScript">
      <i class="fa fa-chevron-left"></i> JavaScript ECMAScript
    </a></div>
      <div class="post-nav-item">
    <a href="/2019/08/13/Web/CSS%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/" rel="next" title="CSS学习笔记">
      CSS学习笔记 <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



          </div>
          

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#HTML-简介"><span class="nav-number">1.</span> <span class="nav-text">HTML 简介</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#HTML-标签"><span class="nav-number">1.0.1.</span> <span class="nav-text">HTML 标签</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#HTML-文档-网页"><span class="nav-number">1.0.2.</span> <span class="nav-text">HTML 文档 &#x3D; 网页</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#HTML基础"><span class="nav-number">2.</span> <span class="nav-text">HTML基础</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#HTML-标题"><span class="nav-number">2.0.1.</span> <span class="nav-text">HTML 标题</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#HTML-段落"><span class="nav-number">2.0.2.</span> <span class="nav-text">HTML 段落</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#HTML-链接"><span class="nav-number">2.0.3.</span> <span class="nav-text">HTML 链接</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#HTML-图像"><span class="nav-number">2.0.4.</span> <span class="nav-text">HTML 图像</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#HTML-元素"><span class="nav-number">3.</span> <span class="nav-text">HTML 元素</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#HTML-属性"><span class="nav-number">4.</span> <span class="nav-text">HTML 属性</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#HTML标题"><span class="nav-number">5.</span> <span class="nav-text">HTML标题</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#HTML-水平线"><span class="nav-number">5.1.</span> <span class="nav-text">HTML 水平线</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#HTML-注释"><span class="nav-number">5.2.</span> <span class="nav-text">HTML 注释</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#HTML-段落-1"><span class="nav-number">6.</span> <span class="nav-text">HTML 段落</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#HTML-折行"><span class="nav-number">6.1.</span> <span class="nav-text">HTML 折行</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#HTML-样式"><span class="nav-number">7.</span> <span class="nav-text">HTML 样式</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#不赞成使用的标签和属性"><span class="nav-number">8.</span> <span class="nav-text">不赞成使用的标签和属性</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#应该避免使用下面这些标签和属性："><span class="nav-number">8.1.</span> <span class="nav-text">应该避免使用下面这些标签和属性：</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#背景颜色"><span class="nav-number">8.2.</span> <span class="nav-text">背景颜色</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#字体、颜色和尺寸"><span class="nav-number">8.3.</span> <span class="nav-text">字体、颜色和尺寸</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#文本对齐"><span class="nav-number">8.4.</span> <span class="nav-text">文本对齐</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#HTML文本格式化"><span class="nav-number">9.</span> <span class="nav-text">HTML文本格式化</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#文本格式化标签"><span class="nav-number">9.1.</span> <span class="nav-text">文本格式化标签</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#“计算机输出”标签"><span class="nav-number">9.2.</span> <span class="nav-text">“计算机输出”标签</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#引用、引用和术语定义"><span class="nav-number">9.3.</span> <span class="nav-text">引用、引用和术语定义</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#HTML-引用"><span class="nav-number">10.</span> <span class="nav-text">HTML 引用</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#HTML-计算机代码"><span class="nav-number">11.</span> <span class="nav-text">HTML 计算机代码</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#HTML-CSS"><span class="nav-number">12.</span> <span class="nav-text">HTML CSS</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#外部样式表"><span class="nav-number">12.1.</span> <span class="nav-text">外部样式表</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#内部样式表"><span class="nav-number">12.2.</span> <span class="nav-text">内部样式表</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#内联样式"><span class="nav-number">12.3.</span> <span class="nav-text">内联样式</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#HTML-链接-1"><span class="nav-number">13.</span> <span class="nav-text">HTML 链接</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#超链接"><span class="nav-number">13.1.</span> <span class="nav-text">超链接</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#链接语法"><span class="nav-number">13.2.</span> <span class="nav-text">链接语法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#target-属性"><span class="nav-number">13.3.</span> <span class="nav-text">target 属性</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#name-属性"><span class="nav-number">13.4.</span> <span class="nav-text">name 属性</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#HTML-图像-1"><span class="nav-number">14.</span> <span class="nav-text">HTML 图像</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#图像标签（-lt-img-gt-）和源属性（Src）"><span class="nav-number">14.1.</span> <span class="nav-text">图像标签（&lt;img&gt;）和源属性（Src）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#替换文本属性（Alt）"><span class="nav-number">14.2.</span> <span class="nav-text">替换文本属性（Alt）</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#HTML-表格"><span class="nav-number">15.</span> <span class="nav-text">HTML 表格</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#HTML-列表"><span class="nav-number">16.</span> <span class="nav-text">HTML 列表</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#HTML块"><span class="nav-number">17.</span> <span class="nav-text">HTML块</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#HTML-块元素"><span class="nav-number">17.1.</span> <span class="nav-text">HTML 块元素</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#HTML-lt-div-gt-元素"><span class="nav-number">17.2.</span> <span class="nav-text">HTML&lt;div&gt;元素</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#HTML-内联元素"><span class="nav-number">17.3.</span> <span class="nav-text">HTML 内联元素</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#HTML类"><span class="nav-number">18.</span> <span class="nav-text">HTML类</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#分类块级元素"><span class="nav-number">18.1.</span> <span class="nav-text">分类块级元素</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#分类行内元素"><span class="nav-number">18.2.</span> <span class="nav-text">分类行内元素</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#HTML-布局"><span class="nav-number">19.</span> <span class="nav-text">HTML 布局</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#使用-lt-div-gt-元素的-HTML-布局"><span class="nav-number">19.1.</span> <span class="nav-text">使用 &lt;div&gt;元素的 HTML 布局</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#使用-HTML5-的网站布局"><span class="nav-number">19.2.</span> <span class="nav-text">使用 HTML5 的网站布局</span></a></li></ol></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="Lanqilu"
      src="http://img.whl123456.top/image/avatar.jpg">
  <p class="site-author-name" itemprop="name">Lanqilu</p>
  <div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives/">
        
          <span class="site-state-item-count">85</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
          
        <span class="site-state-item-count">18</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
          
        <span class="site-state-item-count">39</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author motion-element">
      <span class="links-of-author-item">
        <a href="https://github.com/lanqilu" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;lanqilu" rel="noopener" target="_blank"><i class="fa fa-fw fa-github"></i></a>
      </span>
      <span class="links-of-author-item">
        <a href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=zqKvoL_noruOqKG2o6_nouCtoaM" title="E-Mail → http:&#x2F;&#x2F;mail.qq.com&#x2F;cgi-bin&#x2F;qm_share?t&#x3D;qm_mailme&amp;email&#x3D;zqKvoL_noruOqKG2o6_nouCtoaM" rel="noopener" target="_blank"><i class="fa fa-fw fa-envelope"></i></a>
      </span>
  </div>



      </div>
        <div class="back-to-top motion-element">
          <i class="fa fa-arrow-up"></i>
          <span>0%</span>
        </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 2019 – 
  <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Lanqilu</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" class="theme-link" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.org/" class="theme-link" rel="noopener" target="_blank">NexT.Gemini</a> 强力驱动
  </div>

        








      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js"></script>
  <script src="/lib/pjax/pjax.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
  <script src="//cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/pangu@4/dist/browser/pangu.min.js"></script>
  <script src="/lib/velocity/velocity.min.js"></script>
  <script src="/lib/velocity/velocity.ui.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/schemes/pisces.js"></script>


<script src="/js/next-boot.js"></script>

  <script>
var pjax = new Pjax({
  selectors: [
    'head title',
    '#page-configurations',
    '.content-wrap',
    '.post-toc-wrap',
    '.languages',
    '#pjax'
  ],
  switches: {
    '.post-toc-wrap': Pjax.switches.innerHTML
  },
  analytics: false,
  cacheBust: false,
  scrollTo : !CONFIG.bookmark.enable
});

window.addEventListener('pjax:success', () => {
  document.querySelectorAll('script[data-pjax], script#page-configurations, #pjax script').forEach(element => {
    var code = element.text || element.textContent || element.innerHTML || '';
    var parent = element.parentNode;
    parent.removeChild(element);
    var script = document.createElement('script');
    if (element.id) {
      script.id = element.id;
    }
    if (element.className) {
      script.className = element.className;
    }
    if (element.type) {
      script.type = element.type;
    }
    if (element.src) {
      script.src = element.src;
      // Force synchronous loading of peripheral JS.
      script.async = false;
    }
    if (element.dataset.pjax !== undefined) {
      script.dataset.pjax = '';
    }
    if (code !== '') {
      script.appendChild(document.createTextNode(code));
    }
    parent.appendChild(script);
  });
  NexT.boot.refresh();
  // Define Motion Sequence & Bootstrap Motion.
  if (CONFIG.motion.enable) {
    NexT.motion.integrator
      .init()
      .add(NexT.motion.middleWares.subMenu)
      .add(NexT.motion.middleWares.postList)
      .bootstrap();
  }
  NexT.utils.updateSidebarPosition();
});
</script>




  




  
<script src="/js/local-search.js"></script>













    <div id="pjax">
  

  

  

    </div>
</body>
</html>
